"use client";
import { List, EditButton, ShowButton, DeleteButton, useTable } from "@refinedev/antd";
import { Space, Table, Tag } from "antd";
import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";


export default function MenuList() {
  const [datas, setDatas] = useState<any[]>([]);
  const { tableProps, tableQueryResult } = useTable({
    resource: "system/menu/tree",
    syncWithLocation: true,
    hasPagination: false,
  });

  useEffect(() => {
    const res = tableProps?.dataSource as any;
    if (res && res.data) {
      setDatas(res.data);
    }
  }, [tableProps?.dataSource]);

  return (
    <List>
      <Table
        dataSource={datas}
        rowKey="menu_id"
        loading={tableProps?.loading}
        pagination={false}
        expandable={{
          defaultExpandAllRows: true,
          rowExpandable: record => Array.isArray(record.children) && record.children.length > 0,
          expandIcon: ({ expanded, onExpand, record }) =>
            Array.isArray(record.children) && record.children.length > 0 ? (
              <span style={{ cursor: "pointer", marginRight: 4 }} onClick={e => onExpand(record, e)}>
                {expanded ? <CaretDownOutlined style={{ color: '#1890ff' }} /> : <CaretRightOutlined style={{ color: '#1890ff' }} />}
              </span>
            ) : (
              <span style={{ marginRight: 4, width: 16, display: 'inline-block' }}></span>
            ),
          indentSize: 16,
        }}
      >
        <Table.Column 
          dataIndex="menu_id" 
          title="ID" 
          width={120}
          render={(text) => <span>{text}</span>}
        />
        <Table.Column dataIndex="menu_name" title="菜单名称" />
        <Table.Column dataIndex="parent_id" title="父ID" />
        <Table.Column dataIndex="order_num" title="排序" />
        <Table.Column dataIndex="path" title="路由地址" />
        <Table.Column 
          dataIndex="menu_type" 
          title="类型" 
          render={(text) => {
            const typeMap: { [key: string]: { text: string; color: string } } = {
              'M': { text: '目录', color: 'blue' },
              'C': { text: '菜单', color: 'green' }, 
              'F': { text: '按钮', color: 'orange' }
            };
            const type = typeMap[text] || { text, color: 'default' };
            return <Tag color={type.color}>{type.text}</Tag>;
          }}
        />
        <Table.Column 
          dataIndex="status" 
          title="状态" 
          render={(text) => {
            const statusMap: { [key: string]: { text: string; color: string } } = {
              '0': { text: '正常', color: 'success' },
              '1': { text: '停用', color: 'error' }
            };
            const status = statusMap[text] || { text, color: 'default' };
            return <Tag color={status.color}>{status.text}</Tag>;
          }}
        />
        <Table.Column dataIndex="perms" title="权限字符" />
        <Table.Column
          title="操作"
          dataIndex="actions"
          render={(_, record) => (
            <Space>
              <EditButton hideText size="small" recordItemId={record.menu_id} />
              <ShowButton hideText size="small" recordItemId={record.menu_id} />
              <DeleteButton hideText size="small" recordItemId={record.menu_id} onSuccess={() => {
                tableQueryResult.refetch();
              }} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
} 